<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>表单实例1</title>
    <script></script>
</head>
<body>
    <form action="" method="post">
        <!-- 账号  文本输入框-->
        <lable for="name">账号:</lable>
        <input type="text" id="name" name="name" required>
        <br>

        <!-- 密码 文本输入框 -->
        <label>密码:</label>
        <input type="password" id="password" name="password">
        <br>

        <!-- 性别 单选按钮 -->
        <label>性别:</label>
        <input type="radio" id="male" name="sex" value="男" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="sex" value="female">
        <label for="female">女</label>
        <br>

        <!-- 兴趣爱好 复选框 -->
<!--        <input type="checkbox" id="hobby" name="hobby" checked>-->
<!--        <label for="hobby">篮球</label>-->
<!--        <label for="hobby">足球</label>-->
<!--        <label for="hobby">排球</label>-->
        <input type="checkbox"  name="hobby" value="篮球" checked>篮球
        <input type="checkbox"  name="hobby" value="足球" >足球
        <input type="checkbox"  name="hobby" value="排球" >排球
        <br>

        <!-- 国籍 下拉框 -->
        <label for="country">国家</label>
        <select id="country" name="country">
            <option value="中国">中国</option>
            <option value="美国">美国</option>
            <option value="韩国">韩国</option>
        </select>
        <br>

        <!-- 个人简介 下拉框 -->
        <textarea rows="10" cols="30">
        个人简介
        </textarea>
        <br>

        <!-- 提交按钮 -->
        <input type="submit" name="submit" value="按钮">

        <!-- 将<input>标签内按钮类型从type="submit"修改为type="button"  submit是默认提交当前表单-->

    </form>
    <script>document.write("hello")</script>
    <script>console.log("world")</script>
    <script>window.alert("hello world")</script>
    <!-- 外部连接 -->
    <script src="../static/js/form1.js"></script>

    <!-- 默认等价第二个 -->
    <script type="text/javascript">console.log("world")</script>

    <script type="application/javascript">
        console.log("This is a JavaScript script.");
    </script>


    <!-- 严格审查 + 模块化 -->
<!--    <script type="module">-->
<!--        import { myFunction } from './myModule.js';-->
<!--        myFunction();-->
<!--    </script>-->


    <script type="application/json" id="myData">
        {
            "name": "John",
            "age": 30
        }

    </script>

    <script>
        const dataElement = document.getElementById('myData');
        const jsonData = JSON.parse(dataElement.textContent);
        console.log(jsonData.name); // 输出 "John"
    </script>


</body>
</html>